<template>
  <button
      :class="[plain ? plains[type] : type , {disabled: disabled || loading}, {circle: circle}]"
      :size="size"
      :plain="plain"
      :loading="loading"
      :open-type="openType"
      :hover-start-time="start"
      :hover-stay-time="end"
      :app-parameter="app"
      :lang="lang"
      :disabled="disabled"
      @getphonenumber="getPhoneNumber"
      @getuserinfo="getUserInfo"
      @error="error"
      @opensetting="openSetting"
      @launchapp="launchApp"
      @click="buttClick">
    <text v-if="icon" :class="[icon, color]" style="margin-right: 3px;"></text>
    <slot></slot>
  </button>
</template>

<script lang="ts">
// https://uniapp.dcloud.io/component/button.html
export default {
  name: "wit-button",
  props: {
    // 按钮的大小
    size: {
      type: String,
      values: ['default', 'mini'],
      default: 'default'
    },
    // 按钮的样式类型
    type: {
      type: String,
      values: ['primary', 'success', 'warning', 'danger', 'info', 'text'],
      default: 'default'
    },
    // 按钮是否镂空，背景色透明
    plain: Boolean,
    // 是否禁用
    disabled: Boolean,
    // 名称前是否带 loading 图标
    loading: Boolean,
    // 是否圆角按钮
    round: Boolean,
    // 是否圆形按钮
    circle: Boolean,
    icon: {
      type: String,
      default: ''
    },
    /** 开放能力 param is String
     * @param feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志··App、微信小程序、QQ小程序
     * @param share	触发用户转发··微信小程序、百度小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序
     * @param getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息··微信小程序、百度小程序、QQ小程序、快手小程序
     * @param contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息··微信小程序、百度小程序
     * @param getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息··微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序。App平台另见一键登陆
     * @param launchApp  小程序中打开APP，可以通过app-parameter属性设定向APP传的参数··微信小程序、QQ小程序
     * @param openSetting  打开授权设置页··微信小程序、百度小程序
     * @param getAuthorize	支持小程序授权··支付宝小程序
     * @param contactShare  分享到通讯录好友··支付宝小程序
     * @param lifestyle  关注生活号··支付宝小程序
     * @param openGroupProfile  呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList ··QQ小程序基础库1.4.7版本+
     */
    openType: {
      type: String,
      values: ['feedback', 'share','getUserInfo','contact','getPhoneNumber','launchApp','openSetting','getAuthorize','contactShare','lifestyle','openGroupProfile'],
      default:''
    },
    // 按住后多久出现点击态，单位毫秒
    start: {
      type: Number,
      default: 20,
    },
    // 手指松开后点击态保留时间，单位毫秒
    end: {
      type: Number,
      default: 70,
    },
    // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
    app: {
      type: String,
      default: ''
    },
    // 以下微信小程序
    // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
    lang: {
      type: String,
      default: 'zh_CN'
    },
    // 图标颜色
    color: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      plains: {
        primary: 'primary-plain',
        success: 'success-plain',
        warning: 'warning-plain',
        danger: 'danger-plain',
        info: 'info-plain',
        text: 'text-plains'
      }
    }
  },
  methods: {
    buttClick(evt) {
      if(this.disabled || this.loading) return
      this.$emit('click', evt)
    },
    /**
     * 获取用户手机号回调
     * @param evt
     */
    getPhoneNumber(evt) {
      this.$emit('getPhoneNumber', evt)
    },
    /**
     * 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
     * @param evt
     */
    getUserInfo(evt) {
      this.$emit('getUserInfo', evt)
    },
    /**
     * 当使用开放能力时，发生错误的回调
     * @param evt
     */
    error(evt) {
      this.$emit('error', evt)
    },
    /**
     * 在打开授权设置页并关闭后回调
     * @param evt
     */
    openSetting(evt) {
      this.$emit('openSetting', evt)
    },
    /**
     * 从小程序打开 App 成功的回调
     * @param evt
     */
    launchApp(evt) {
      this.$emit('launchApp', evt)
    }
  }
}
</script>

<style scoped>
.primary {
  color: white;
  background: var(--primary);
  cursor: pointer;
}
.success {
  color: white;
  background: var(--success);
  cursor: pointer;
}
.warning {
  color: white;
  background: var(--warning);
  cursor: pointer;
}
.danger {
  color: white;
  background: var(--danger);
  cursor: pointer;
}
.info {
  color: white;
  background: var(--info);
  cursor: pointer;
}
.primary:active {
  opacity: 0.6;
}
.success:active {
  opacity: 0.6;
}
.warning:active {
  opacity: 0.6;
}
.danger:active {
  opacity: 0.6;
}
.info:active {
  opacity: 0.6;
}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.circle:after {
  border: unset;
}

@media all and (max-width: 480px) {
  .circle {
    border-radius:50%;
    padding: 10px;
    width: 50px;
    height: 50px;
  }

}
@media all and (max-width: 1100px) and (min-width: 480px) {
  .circle {
    border-radius:50%;
    padding: 5px;
    width: 55px;
    height: 55px;
    line-height: 50px;
  }
}
@media all and (min-width: 1100px) {
  .circle {
    border-radius:50%;
    padding: 5px;
    width: 55px;
    height: 55px;
    line-height: 50px;
  }
}
.primary-plain {
  border: var(--primary) 1px solid;
  background: white;
  color: var(--primary);
}
.success-plain {
  border: var(--success) 1px solid;
  background: white;
  color: var(--success);
}
.warning-plain {
  border: var(--warning) 1px solid;
  background: white;
  color: var(--warning);
}
.danger-plain {
  border: var(--danger) 1px solid;
  background: white;
  color: var(--danger);
}
.info-plain {
  border: var(--info) 1px solid;
  background: white;
  color: var(--info);
}
</style>